<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Websocket</title>
</head>
<style>
    #logDetail {
        color: #27aa5e;
        background-color: #454545;
        padding: 10px;
    }
</style>

<body>
    <!-- <h1>字符串转换大写</h1>
    <form>
        <p>
            字符串: <input id="content" type="text" placeholder="输入要转换的字符串">
        </p>
    </form>
    <label id="result">结果为：</label><br><br>
    <button onclick="send()">转换</button>
    <button onclick="close()">关闭</button> -->
    <div id="logDetail"></div>
    <script>
        function guid2() {
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }
            return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
        }
    </script>
    <script type="text/javascript">
        // if (!window["WebSocket"]) {
        //     alert("您的浏览器不支持 WebSocket, 程序无法正常运行!!!");
        // }

        // 获取日志路径
        let path = ""
        if (location.search.indexOf("?pathname=") != -1) {
            path = location.search.split("?pathname=")[1]
        }
        console.log("path", path);

        if (path === "") {
            alert("请输入pathname参数")
        }

        var sock = null;
        var wsuri = "ws://162.14.98.165:8889/ws/upper?sid=" + guid2();
        sock = new WebSocket(wsuri);
        sock.onclose = function () {
            console.log("连接被断开");
        };

        sock.onopen = function () {
            console.log("已连接");
            sock.send(path);
        };

        sock.onerror = function (e) {
            console.log("error:" + e);
        };
        sock.onmessage = function (e) {
            // var result = document.getElementById('result');
            // result.innerHTML = "结果为：" + e.data;
            document.getElementById('logDetail').innerHTML = document.getElementById('logDetail').innerHTML + e.data + "<br/>"
            window.scrollTo(0, document.body.scrollHeight)
        }

        function send() {
            var msg = document.getElementById('content').value;
            sock.send(msg);
        }

        function close() {
            sock.close()
        }

    </script>
</body>

</html>